<template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
                </div>
                <div class="title">template7</div>
            </div>
        </div>
        <div class="page-content">
            <div class="block-title">编译和渲染</div>
            <div class="block">
                Hello, my name is {{firstName}} {{lastName}}
            </div>
            <div class="block-title">each</div>
            <div class="block">
                <p>Here are the list of people i know:</p>
                <ul>
                {{#each people}}
                <li>{{@index}}, {{firstName}} {{lastName}} {{@value}}</li>
                {{/each}}
                </ul>
                <p>Here are the list of fruits:</p>
                <ul>
                {{#each fruits}}
                <li>{{@key}} - {{this}} {{@value}}</li>
                {{/each}}
                </ul>
            </div>
            <div class="block-title">unless</div>
            <div class="block">

                    {{#unless hobby}}
                    <p>I don't have hobby</p>
                    {{else}}
                    <p>I have hobby</p>
                    {{/unless}}

                    {{#if hobby}}
                    <p>I have hobby</p>
                    {{else}}
                    <p>I don't have hobby</p>
                    {{/if}}
                    {{#js_compare 'this.hobby'}}
                    <p>I have hobby</p>
                    {{else}}
                    <p>I don't have hobby</p>
                    {{/js_compare}}
            </div>
            <div class="block-title">with</div>
            <div class="block">
                    {{#with props}}
                    <p>Car has {{power}} power and {{speed}} maximum speed</p>
                    {{/with}}
            </div>
            <div class="block-title">escape</div>
            <div class="block">
                    {{escape htmlStr}}
                    {{js "escape(@root.htmlStr)"}}
            </div>
            <div class="block-title">\{\{js "expression"\}\}</div>
            <div class="block">
                <p>{{title}}</p>
                <p>Price: ${{js "this.price * 1.2"}} </p>
                <p>{{js "this.inStock ? 'In Stock' : 'Not in stock'"}} </p>
                {{#each people}}
                <li>{{js "@index%2 ? 'even' : 'odd'"}} {{js "this.firstName"}} {{js "'wow '+../title"}}</li>
                {{/each}}
            </div>
            <div class="block-title">\{\{js_if "expression"\}\}</div>
            <div class="block">
                <p>{{#js_if "this.a === this.b"}}A equals to B{{else}}A not equals to B{{/js_if}} </p>
                <p>{{#js_compare "this.a === this.b"}}A equals to B{{else}}A not equals to B{{/js_compare}} </p>
            </div>
            <div class="block-title">@root</div>
            <div class="block">
                <p>{{@root.log(123)}}</p>
                {{#each people}}
                <li>{{@index}} {{@root.log(arguments[0].firstName)}}</li>
                {{/each}}
            </div>
            <div class="block-title">自定义helpser</div>
            <div class="block">
                {{#show hobby name="1234"}}
                <p>I don't have hobby</p>
                {{else}}
                <p>I have hobby</p>
                {{/show}}
            </div>
        </div>
    </div>
</template>
<style>
    .block-title{
        font-weight:bolder;
    }
</style>
<script>
    return {
        data:function(){
            return {
                firstName: 'John',
                lastName: 'Doe',
                people : [
                    {
                    firstName: 'John',
                    lastName: 'Doe'
                    },
                    {
                    firstName: 'Mark',
                    lastName: 'Johnson'
                    },
                ],
                hobby: true,
                fruits:{
                    banana:5,
                    apple:3
                },
                props: {
                    power: '150 hp',
                    speed: '200 km/h',
                },
                htmlStr:'<span style="color:red">red span</span>',
                title: 'iPhone 6 Plus',
                price: 1000,
                inStock: true,
                a: 5,
                b: 34
            }
        },
        methods:{
            log(e){
                console.log(e)
            }
        },
        on:{
            pageInit:function(){
                // let str = `Hello, my name is {{firstName}} {{lastName}} @click="say"`;
                // console.log('模板', str);
                // var compiledTemplate = Template7.compile(str);
                // console.log('编译器', compiledTemplate)
                // // Now we may render our compiled template by passing required context
                // var context = {
                //     firstName: 'John',
                //     lastName: 'Doe'
                // };
                // var html = compiledTemplate(context);
                // console.log('编译数据后',html)
            }
        }
    }
</script>